.message-wrap {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 16px;
  overflow: auto;
  z-index: 999999;
  max-height: calc(100vh - 32px);

  &::-webkit-scrollbar {
    display: none;
  }

  &.right {
    right: 16px
  }

  &.left {
    left: 16px
  }

  .message-item {
    display: flex;
    width: 275px;
    padding: 14px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #3f3f3f;
    box-shadow: 0px 0px 4px #3f3f3f;
    margin: 8px;
  }

  .m-icon {
    display: flex;
    min-height: 1em;
    min-width: 1em;
    font-size: 24px;

    &.success {
      color: #67c23a;
    }

    &.info {
      color: #909399;
    }

    &.warning {
      color: #e6a23c;
    }

    &.error {
      color: #f56c6c;
    }
  }

  .m-content {
    margin-left: 13px;
    font-size: 16px;
    line-height: 24px;
    color: #cfd3dc;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}